<template>
  <div class="data-lake">
    <div class="aside">
      <left-aside></left-aside>
    </div>
    <div class="container">
      <div class="container__header">
        <div class="tobbar-title">
          <span
            class="left-banner"
            v-for="(item, index) in breadcrumdNames"
            :class="index != 0 ? 'iconfont ic-right' : ''"
            :key="index"
            >{{ item }}</span
          >
        </div>
        <div class="operation">
          <div class="infor">
            {{ $t("layout.now") }} <span>730</span> {{ $t("layout.unit") }}
          </div>
          <div class="operation__upload">
            <i class="iconfont ic-download"></i
            >{{ $t("layout.requestDownload") }}
          </div>
          <div class="operation__generate">
            <i class="iconfont ic-link"></i>{{ $t("layout.generateInterface") }}
          </div>
        </div>
      </div>
      <div class="content">
        <div class="search">
          <div class="search-item">
            <select-list-city
              v-model="searchForm.city"
              clearable
            ></select-list-city>
          </div>
          <div class="search-item">
            <el-date-picker
              v-model="searchForm.date"
              type="date"
              :placeholder="$t('placeholder.statisticalTime')"
            >
            </el-date-picker>
          </div>
          <div class="search-item">
            <el-input
              v-model="searchForm.type"
              clearable
              :placeholder="$t('placeholder.index')"
            />
          </div>
          <div class="search-item">
            <div class="search-button search-button-bg">
              {{ $t("btnName.sure") }}
            </div>
          </div>
          <div class="search-item">
            <div class="line"></div>
          </div>
          <div class="search-item">
            <div class="search-button search-button-bg" @click="seniorSearch">
              {{ $t("btnName.seniorSearch") }}
            </div>
          </div>
          <div class="search-item">
            <div class="search-button search-button-border">
              {{ $t("btnName.field") }}
            </div>
          </div>
        </div>
        <div class="table">
          <cc-table
            :tableHeader="tableHeader"
            :tableData="tableData"
            @row-click="rowClick"
          />
          <div
            class="table__slide"
            :class="{ 'table__slide--active': slideFlag }"
          >
            <div class="slide__header">
              <span>更多属性</span>
              <i class="iconfont ic-wrong" @click="slideFlag = false"></i>
            </div>
            <div class="slide__content">
              <div>
                <span>统计周期：</span>
                <b>年度</b>
              </div>
              <div>
                <span>数据来源：</span>
                <a href="https://xxgk.zust.edu.cn/" target="_blank"></a>
              </div>
              <div>
                <span>分享人：</span>
                <b>利于666</b>
              </div>
              <div>
                <span>上传时间：</span>
                <b>2021-05-05</b>
              </div>
              <div>
                <span>更新人：</span>
                <b>张三丰</b>
              </div>
              <div>
                <span>更新时间：</span>
                <b>2021-06-06</b>
              </div>
              <div>
                <span>浏览次数：</span>
                <b>123</b>
              </div>
              <div>
                <span>调用次数：</span>
                <b>8</b>
              </div>
              <div>
                <span>下载次数：</span>
                <b>年度</b>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <cc-page
          :total="total"
          :page="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        />
      </div>
    </div>
  </div>
  <senior-search ref="seniorSearch"></senior-search>
</template>
<script>
import { SelectListCity } from "@/components/select-banner";
import { CcTable, CcPage } from "@/components";
import LeftAside from "./components/aside/index.vue";
import { mapState } from "pinia";
import commonStore from "@/stores";
import SeniorSearch from "./components/senior-search/index.vue";
export default {
  components: {
    SelectListCity,
    CcTable,
    CcPage,
    LeftAside,
    SeniorSearch,
  },
  computed: {
    ...mapState(commonStore, ["breadcrumdNames"]),
  },
  data() {
    return {
      searchForm: {
        city: "Option2",
        date: "",
        type: "",
      },
      tableHeader: JSON.parse(
        decodeURIComponent(this.$t("tableHeader./data-lake")),
      ),
      tableData: [
        {
          id: "1",
          index: "Tom",
          data: "No. 189, Grove St",
          city: "上海市",
          statisticalTime: "2021-02-06",
          updateTime: "2021-02-06",
        },
        {
          id: "2",
          index: "Tom",
          data: "No. 189, Grove St",
          city: "上海市",
          statisticalTime: "2021-02-06",
          updateTime: "2021-02-06",
        },
        {
          id: "3",
          index: "Tom",
          data: "No. 189, Grove St",
          city: "上海市",
          statisticalTime: "2021-02-06",
          updateTime: "2021-02-06",
        },
        {
          id: "4",
          index: "Tom",
          data: "No. 189, Grove St",
          city: "上海市",
          statisticalTime: "2021-02-06",
          updateTime: "2021-02-06",
        },
        {
          id: "5",
          index: "Tom",
          data: "No. 189, Grove St",
          city: "上海市",
          statisticalTime: "2021-02-06",
          updateTime: "2021-02-06",
        },
        {
          id: "6",
          index: "Tom",
          data: "No. 189, Grove St",
          city: "上海市",
          statisticalTime: "2021-02-06",
          updateTime: "2021-02-06",
        },
        {
          id: "7",
          index: "Tom",
          data: "No. 189, Grove St",
          city: "上海市",
          statisticalTime: "2021-02-06",
          updateTime: "2021-02-06",
        },
      ],
      slideFlag: false,
      total: 200,
      page: 1,
    };
  },
  methods: {
    rowClick(res) {
      this.slideFlag = true;
    },
    handleCurrentChange() {},
    handleSizeChange() {},
  },
};
</script>
<style scoped lang="scss">
.data-lake {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.aside {
  width: 480px;
  height: 100%;
}
.container {
  width: calc(100% - 48px);
  height: 100%;
  padding: 0 24px 0 16px;
  &__header {
    height: 68px;
    @include flex-x-between-y-center();
    .tobbar-title {
      color: map-get($map: $font-sizes, $key: text);
      span {
        margin-right: 10px;
        &:last-child {
          color: map-get($map: $font-sizes, $key: title);
          font-weight: bold;
          font-size: 14px;
        }
      }
      .ic-right:before {
        margin-right: 10px;
      }
    }
    .operation {
      display: flex;
      div {
        margin-left: 8px;
        color: #fff;
        height: 36px;
        line-height: 36px;
      }
      .infor {
        color: #86909c;
        span {
          color: #6042dc;
        }
      }
      &__upload,
      &__generate {
        width: 120px;
        text-align: center;
        border-radius: 2px;
        background: rgba(96, 66, 220, 1);
        cursor: pointer;
        i {
          margin-right: 9px;
        }
      }
    }
  }
  .content {
    height: calc(100% - 132px);
    background: #fff;
    padding: 28px 16px 0;
    overflow: hidden;
    .search {
      margin-bottom: 18px;
      @include flex-y-center;
      &-item {
        margin-right: 8px;
      }
      .line {
        width: 1px;
        height: 16px;
        background: map-get($map: $stroke-color, $key: deep);
      }
      &-button {
        height: 32px;
        line-height: 32px;
        padding: 0 16px;
        border-radius: 2px;
        cursor: pointer;
      }
      &-button-bg {
        background: map-get($map: $bg-primary, $key: static);
        color: map-get($map: $font-sizes, $key: white);
      }
      &-button-border {
        border: 1px solid map-get($map: $bg-primary, $key: static);
        color: map-get($map: $bg-primary, $key: static);
      }
    }
    .table {
      height: calc(100% - 78px);
      position: relative;
      &__slide {
        width: 360px;
        height: calc(100% + 28px);
        position: absolute;
        right: -376px;
        top: 0;
        transition: right ease 0.5s;
        background: #fff;
        z-index: 9;
        &--active {
          right: -16px;
          box-shadow: -2px 0 8px 0 rgba(78, 89, 105, 0.12);
        }
      }
      .slide {
        &__header {
          height: 48px;
          background: #fafafa;
          padding: 0 12px;
          @include flex-x-between-y-center;
          i {
            color: map-get($map: $font-sizes, $key: smText);
            cursor: pointer;
          }
        }
        &__content {
          div {
            padding: 0 12px;
            height: 47.5px;
            line-height: 47.5px;
            span {
              color: map-get($map: $font-sizes, $key: smText);
              margin-right: 16px;
            }
            a {
              color: #3491fa;
            }
            b {
              font-weight: normal;
            }
          }
        }
      }
    }
  }
  .footer {
    height: 64px;
    @include flex-x-y-center;
  }
}
</style>
